<template>
  <div class="main-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-left">
        <el-icon class="app-icon" :size="24"><Lock /></el-icon>
        <span class="app-name">密码管理器</span>
      </div>
      
      <div class="header-center">
        <el-input
          v-model="accountsStore.searchQuery"
          :placeholder="t('main.account.searchPlaceholder')"
          :prefix-icon="Search"
          class="search-input"
          clearable
        />
      </div>
      
      <div class="header-right">
        <el-button
          type="primary"
          :icon="Plus"
          @click="showAccountDialog = true"
        >
          {{ t('main.account.addAccount') }}
        </el-button>
        
        <el-button
          :icon="RefreshRight"
          circle
          @click="handleRefresh"
          :loading="accountsStore.loading"
          title="刷新数据"
        />
        
        <el-button
          :icon="Setting"
          circle
          @click="showSettings = true"
        />
        
        <el-button
          :icon="Lock"
          circle
          type="warning"
          @click="handleLock"
        />
      </div>
    </div>

    <div class="main-content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div class="category-section">
          <div class="section-header">
            <div class="section-title">{{ t('main.sidebar.categories') }}</div>
            <el-button 
              size="small" 
              type="text" 
              @click="showCategoryManager = true"
              title="管理分类"
            >
              <el-icon><Setting /></el-icon>
            </el-button>
          </div>
          <div
            v-for="category in allCategories"
            :key="category"
            class="category-item"
            :class="{ active: currentView === 'category' && accountsStore.selectedCategory === category }"
            @click="selectCategory(category)"
          >
            <el-icon class="category-icon">
              <component :is="getCategoryIcon(category)" />
            </el-icon>
            <span class="category-name">{{ category }}</span>
            <span class="category-count">{{ getCategoryCount(category) }}</span>
          </div>
        </div>

        <div class="quick-access">
          <div class="section-title">{{ t('main.sidebar.quickAccess') }}</div>
          <div
            class="quick-item"
            :class="{ active: currentView === 'favorites' }"
            @click="selectFavorites"
          >
            <el-icon><Star /></el-icon>
            <span>{{ t('main.sidebar.favorites') }}</span>
            <span class="count">{{ accountsStore.favoriteAccounts.length }}</span>
          </div>
          <div
            class="quick-item"
            :class="{ active: currentView === 'recent' }"
            @click="selectRecent"
          >
            <el-icon><Clock /></el-icon>
            <span>{{ t('main.sidebar.recent') }}</span>
            <span class="count">{{ accountsStore.recentAccounts.length }}</span>
          </div>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content-area">
        <div class="content-header">
          <h2 class="page-title">
            {{ getPageTitle() }}
          </h2>
          <span class="result-count">
            {{ displayedAccounts.length }} 个账号
          </span>
        </div>

        <div v-loading="accountsStore.loading" class="accounts-grid">
          <div
            v-for="account in displayedAccounts"
            :key="account.id"
            class="account-card"
            :class="{ 'selected': currentSelectedAccount?.id === account.id }"
            @click="selectAccount(account)"
          >
            <div class="account-header">
              <div class="account-icon">
                <img
                  v-if="getWebsiteIcon(account.url)"
                  :src="getWebsiteIcon(account.url)"
                  :alt="account.title"
                  @error="handleIconError"
                />
                <el-icon v-else :size="24"><Operation /></el-icon>
              </div>
              <div class="account-info">
                <h3 class="account-title">{{ account.title }}</h3>
                <p class="account-username">{{ account.username }}</p>
              </div>
              <div class="account-actions">
                <el-button
                  :icon="Star"
                  :type="account.isFavorite ? 'warning' : 'default'"
                  size="small"
                  circle
                  @click.stop="toggleFavorite(account.id)"
                />
                <el-dropdown @command="handleAccountAction">
                  <el-button :icon="MoreFilled" size="small" circle />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="{ action: 'copy-username', account }">
                        <el-icon><User /></el-icon>
                        复制用户名
                      </el-dropdown-item>
                      <el-dropdown-item :command="{ action: 'copy-password', account }">
                        <el-icon><Key /></el-icon>
                        复制密码
                      </el-dropdown-item>
                      <el-dropdown-item :command="{ action: 'copy-url', account }">
                        <el-icon><Link /></el-icon>
                        复制网址
                      </el-dropdown-item>
                      <el-dropdown-item divided :command="{ action: 'edit', account }">
                        <el-icon><Edit /></el-icon>
                        编辑
                      </el-dropdown-item>
                      <el-dropdown-item :command="{ action: 'delete', account }">
                        <el-icon><Delete /></el-icon>
                        删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            
            <div class="account-meta">
              <el-tag :type="getCategoryTagType(account.category)" size="small">
                {{ account.category }}
              </el-tag>
              <span class="last-used">
                {{ formatLastUsed(account.lastUsed) }}
              </span>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!accountsStore.loading && displayedAccounts.length === 0" class="empty-state">
          <el-icon :size="64" class="empty-icon"><DocumentAdd /></el-icon>
          <h3>{{ t('main.account.noAccounts') }}</h3>
          <p>{{ t('main.account.noAccountsDesc') }}</p>
          <el-button type="primary" @click="showAccountDialog = true">
            {{ t('main.account.addAccount') }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 账号添加/编辑对话框 -->
    <AccountDialog
      v-model="showAccountDialog"
      :account="selectedAccount"
      @saved="handleAccountSaved"
    />

    <!-- 密码生成器对话框 -->
    <PasswordGenerator v-model="showPasswordGenerator" mode="standalone" />

    <!-- 设置对话框 -->
    <SettingsDialog v-model="showSettings" />

    <!-- 安全检查对话框 -->
    <SecurityCheck
      :visible="showSecurityCheck"
      @close="showSecurityCheck = false"
    />

    <!-- 密码强度分析对话框 -->
    <PasswordAnalysis
      :visible="showPasswordAnalysis"
      @close="showPasswordAnalysis = false"
    />

    <!-- 重复密码检查对话框 -->
    <DuplicateCheck
      :visible="showDuplicateCheck"
      @close="showDuplicateCheck = false"
      @edit-account="handleEditAccount"
    />

    <!-- 数据备份对话框 -->
    <DataBackup
      :visible="showDataBackup"
      @close="showDataBackup = false"
    />

    <!-- 数据清理对话框 -->
    <DataCleanup
      :visible="showDataCleanup"
      @close="showDataCleanup = false"
    />

    <!-- 分类管理对话框 -->
    <CategoryManager
      :visible="showCategoryManager"
      @close="showCategoryManager = false"
      @categories-updated="handleCategoriesUpdated"
    />

    <!-- 数据导入对话框 -->
    <DataImport
      :visible="showDataImport"
      @close="showDataImport = false"
      @imported="handleImportComplete"
    />

    <!-- 数据导出对话框 -->
    <DataExport
      :visible="showDataExport"
      @close="showDataExport = false"
      @exported="handleExportComplete"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { useAccountsStore } from '../stores/accounts'
import { useSettingsStore } from '../stores/settings'
import { t } from '../locales'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Lock, Search, Plus, Setting, Star, Clock, Operation, User, Key, Link,
  Edit, Delete, MoreFilled, DocumentAdd, Folder, CreditCard,
  Monitor, VideoPlay, Handbag, ChatDotRound, RefreshRight
} from '@element-plus/icons-vue'

import AccountDialog from '../components/AccountDialog.vue'
import PasswordGenerator from '../components/PasswordGenerator.vue'
import SettingsDialog from '../components/SettingsDialog.vue'
import SecurityCheck from '../components/SecurityCheck.vue'
import PasswordAnalysis from '../components/PasswordAnalysis.vue'
import DuplicateCheck from '../components/DuplicateCheck.vue'
import DataBackup from '../components/DataBackup.vue'
import DataCleanup from '../components/DataCleanup.vue'
import CategoryManager from '../components/CategoryManager.vue'
import DataImport from '../components/DataImport.vue'
import DataExport from '../components/DataExport.vue'

const router = useRouter()
const authStore = useAuthStore()
const accountsStore = useAccountsStore()
const settingsStore = useSettingsStore()

const showAccountDialog = ref(false)
const showPasswordGenerator = ref(false)
const showSettings = ref(false)
const showSecurityCheck = ref(false)
const showPasswordAnalysis = ref(false)
const showDuplicateCheck = ref(false)
const showDataBackup = ref(false)
const showDataCleanup = ref(false)
const showCategoryManager = ref(false)
const showDataImport = ref(false)
const showDataExport = ref(false)
const selectedAccount = ref(null)

// 特殊视图状态
const currentView = ref('category') // 'category' | 'favorites' | 'recent'

// 当前选中的账号（用于菜单操作）
const currentSelectedAccount = ref(null)

// 自定义分类
const customCategories = ref([])

// 加载自定义分类
const loadCustomCategories = () => {
  try {
    const saved = localStorage.getItem('customCategories')
    if (saved) {
      customCategories.value = JSON.parse(saved)
    }
  } catch (error) {
    console.error('加载自定义分类失败:', error)
    customCategories.value = []
  }
}

// 所有分类（包括"全部"和自定义分类）
const allCategories = computed(() => {
  const defaultCategories = ['全部', ...accountsStore.categories]
  const customCategoryNames = customCategories.value.map(cat => cat.name)
  return [...defaultCategories, ...customCategoryNames]
})

// 计算显示的账号列表
const displayedAccounts = computed(() => {
  switch (currentView.value) {
    case 'favorites':
      return accountsStore.favoriteAccounts.filter(account => {
        if (!accountsStore.searchQuery) return true
        return account.title.toLowerCase().includes(accountsStore.searchQuery.toLowerCase()) ||
               account.username.toLowerCase().includes(accountsStore.searchQuery.toLowerCase()) ||
               account.url.toLowerCase().includes(accountsStore.searchQuery.toLowerCase())
      })
    case 'recent':
      return accountsStore.recentAccounts.filter(account => {
        if (!accountsStore.searchQuery) return true
        return account.title.toLowerCase().includes(accountsStore.searchQuery.toLowerCase()) ||
               account.username.toLowerCase().includes(accountsStore.searchQuery.toLowerCase()) ||
               account.url.toLowerCase().includes(accountsStore.searchQuery.toLowerCase())
      })
    case 'category':
    default:
      return accountsStore.filteredAccounts
  }
})

// 获取分类图标
const getCategoryIcon = (category) => {
  const iconMap = {
    '全部': Folder,
    '工作': Monitor,
    '个人': User,
    '社交媒体': ChatDotRound,
    '金融理财': CreditCard,
    '游戏娱乐': VideoPlay,
    '购物网站': Handbag
  }
  return iconMap[category] || Folder
}

// 获取分类标签类型
const getCategoryTagType = (category) => {
  const typeMap = {
    '工作': 'primary',
    '个人': 'success',
    '社交媒体': 'warning',
    '金融理财': 'danger',
    '游戏娱乐': 'info',
    '购物网站': 'primary'
  }
  return typeMap[category] || 'default'
}

// 获取分类账号数量
const getCategoryCount = (category) => {
  if (category === '全部') {
    return accountsStore.accounts.length
  }
  return accountsStore.getAccountsByCategory(category).length
}

// 获取页面标题
const getPageTitle = () => {
  switch (currentView.value) {
    case 'favorites':
      return '收藏夹'
    case 'recent':
      return '最近使用'
    case 'category':
      if (accountsStore.selectedCategory === '全部') {
        return '全部账号'
      }
      return accountsStore.selectedCategory
    default:
      return '全部账号'
  }
}

// 获取网站图标
const getWebsiteIcon = (url) => {
  if (!url) return null
  try {
    const domain = new URL(url).hostname
    return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
  } catch {
    return null
  }
}

// 处理图标加载错误
const handleIconError = (event) => {
  event.target.style.display = 'none'
}

// 格式化最后使用时间
const formatLastUsed = (lastUsed) => {
  if (!lastUsed) return '从未使用'
  
  const now = new Date()
  const used = new Date(lastUsed)
  const diffMs = now - used
  const diffMins = Math.floor(diffMs / (1000 * 60))
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
  
  if (diffMins < 1) return '刚刚使用'
  if (diffMins < 60) return `${diffMins}分钟前`
  if (diffHours < 24) return `${diffHours}小时前`
  if (diffDays < 30) return `${diffDays}天前`
  
  return used.toLocaleDateString()
}

// 选择分类
const selectCategory = (category) => {
  currentView.value = 'category'
  accountsStore.selectedCategory = category
}

// 选择收藏夹
const selectFavorites = () => {
  currentView.value = 'favorites'
}

// 选择最近使用
const selectRecent = () => {
  currentView.value = 'recent'
}

// 选择账号
const selectAccount = (account) => {
  selectedAccount.value = account
  currentSelectedAccount.value = account
  // 更新最后使用时间
  accountsStore.updateLastUsed(account.id)
}

// 切换收藏状态
const toggleFavorite = async (accountId) => {
  try {
    await accountsStore.toggleFavorite(accountId)
    ElMessage.success('收藏状态已更新')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 处理账号操作
const handleAccountAction = async ({ action, account }) => {
  switch (action) {
    case 'copy-username':
      if (await accountsStore.copyToClipboard(account.username, account.id)) {
        ElMessage.success('用户名已复制到剪贴板')
      }
      break
      
    case 'copy-password':
      if (await accountsStore.copyToClipboard(account.password, account.id)) {
        ElMessage.success('密码已复制到剪贴板')
      }
      break
      
    case 'copy-url':
      if (account.url && await accountsStore.copyToClipboard(account.url)) {
        ElMessage.success('网址已复制到剪贴板')
      }
      break
      
    case 'edit':
      selectedAccount.value = account
      showAccountDialog.value = true
      break
      
    case 'delete':
      try {
        await ElMessageBox.confirm(
          `确定要删除账号"${account.title}"吗？此操作不可恢复。`,
          '确认删除',
          {
            type: 'warning',
            confirmButtonText: '删除',
            cancelButtonText: '取消'
          }
        )
        
        await accountsStore.deleteAccount(account.id)
        ElMessage.success('账号已删除')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败')
        }
      }
      break
  }
}

// 处理账号保存
const handleAccountSaved = () => {
  selectedAccount.value = null
  showAccountDialog.value = false
  ElMessage.success('账号已保存')
}

// 刷新数据
const handleRefresh = async () => {
  try {
    await accountsStore.loadAccounts()
    ElMessage.success('数据刷新成功')
  } catch (error) {
    ElMessage.error('刷新失败，请重试')
    console.error('刷新数据失败:', error)
  }
}

// 处理搜索功能
const handleSearch = () => {
  // 聚焦到搜索框
  const searchInput = document.querySelector('.search-input input')
  if (searchInput) {
    searchInput.focus()
    ElMessage.info('请在搜索框中输入关键词')
  }
}

// 清除搜索
const handleClearSearch = () => {
  accountsStore.searchQuery = ''
  currentView.value = 'category'
  accountsStore.selectedCategory = '全部'
  ElMessage.success('搜索已清除')
}

// 复制选中账号的用户名
const handleCopyUsername = async () => {
  if (!currentSelectedAccount.value) {
    ElMessage.warning('请先选择一个账号')
    return
  }
  
  try {
    await settingsStore.secureClipboardCopy(currentSelectedAccount.value.username, '用户名')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

// 复制选中账号的密码
const handleCopyPassword = async () => {
  if (!currentSelectedAccount.value) {
    ElMessage.warning('请先选择一个账号')
    return
  }
  
  try {
    await settingsStore.secureClipboardCopy(currentSelectedAccount.value.password, '密码')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

// 工具功能处理
const handleSecurityCheck = () => {
  showSecurityCheck.value = true
}

const handlePasswordAnalysis = () => {
  showPasswordAnalysis.value = true
}

const handleDuplicateCheck = () => {
  showDuplicateCheck.value = true
}

const handleBackup = () => {
  showDataBackup.value = true
}

const handleCleanup = () => {
  showDataCleanup.value = true
}

const handleImport = () => {
  showDataImport.value = true
}

const handleExport = () => {
  showDataExport.value = true
}

// 处理编辑账号请求（来自其他组件）
const handleEditAccount = (account) => {
  selectedAccount.value = account
  showAccountDialog.value = true
}

// 处理分类更新
const handleCategoriesUpdated = (updatedCategories) => {
  customCategories.value = updatedCategories.filter(cat => !cat.isSystem)
  ElMessage.success('分类设置已更新')
}

const handleImportComplete = (count) => {
  // 导入完成后刷新账号列表
  accountsStore.loadAccounts()
}

const handleExportComplete = (result) => {
  // 导出完成的处理逻辑
}

// 锁定应用
const handleLock = () => {
  authStore.logout()
  router.push('/login')
}

// 监听菜单事件
const handleMenuEvents = () => {
  window.electronAPI.onMenuAction((event, data) => {
    switch (event) {
      case 'menu-new-account':
        selectedAccount.value = null
        showAccountDialog.value = true
        break
      case 'menu-refresh':
        handleRefresh()
        break
      case 'menu-password-generator':
        showPasswordGenerator.value = true
        break
      case 'menu-security-check':
        handleSecurityCheck()
        break
      case 'menu-password-analysis':
        handlePasswordAnalysis()
        break
      case 'menu-duplicate-check':
        handleDuplicateCheck()
        break
      case 'menu-backup':
        handleBackup()
        break
      case 'menu-cleanup':
        handleCleanup()
        break
      case 'menu-import':
        handleImport()
        break
      case 'menu-export':
        handleExport()
        break
      case 'menu-search':
        handleSearch()
        break
      case 'menu-clear-search':
        handleClearSearch()
        break
      case 'menu-copy-username':
        handleCopyUsername()
        break
      case 'menu-copy-password':
        handleCopyPassword()
        break
      case 'app-lock':
        handleLock()
        break
    }
  })
}

// 组件挂载时加载数据
// 处理自动锁定
const handleAutoLock = () => {
  authStore.logout()
  router.push('/login')
}

onMounted(async () => {
  try {
    // 加载数据
    await accountsStore.loadAccounts()
    loadCustomCategories() // 加载自定义分类
    
    // 初始化设置
    await settingsStore.loadSettings()
    
    // 设置菜单事件监听
    window.electronAPI?.onMenuAction(handleMenuEvents)
    
    // 监听应用锁定事件
    window.addEventListener('app-lock', handleAutoLock)
    
  } catch (error) {
    ElMessage.error('加载数据失败')
    console.error('加载数据失败:', error)
  }
})

// 组件卸载时清理监听器
onUnmounted(() => {
  // 清理设置存储
  settingsStore.cleanup()
  
  // 移除事件监听
  window.removeEventListener('app-lock', handleAutoLock)
  
  // 移除菜单监听器
  if (window.electronAPI && window.electronAPI.removeMenuListeners) {
    window.electronAPI.removeMenuListeners()
  }
})
</script>

<style scoped>
.main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.header {
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;
  gap: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-icon {
  color: #667eea;
}

.app-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.header-center {
  flex: 1;
  max-width: 400px;
}

.search-input {
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 250px;
  background: white;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
  overflow-y: auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 12px;
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-section {
  margin-bottom: 30px;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all 0.2s ease;
  gap: 8px;
}

.category-item:hover {
  background: #f5f5f5;
}

.category-item.active {
  background: #667eea;
  color: white;
}

.category-icon {
  font-size: 16px;
}

.category-name {
  flex: 1;
  font-size: 14px;
}

.category-count {
  font-size: 12px;
  color: #999;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.category-item.active .category-count {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.quick-access {
  margin-bottom: 20px;
}

.quick-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all 0.2s ease;
  gap: 8px;
}

.quick-item:hover {
  background: #f5f5f5;
}

.quick-item.active {
  background: #667eea;
  color: white;
}

.quick-item.active .count {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.count {
  font-size: 12px;
  color: #999;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.result-count {
  color: #999;
  font-size: 14px;
}

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.account-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e6e6e6;
  cursor: pointer;
  transition: all 0.2s ease;
}

.account-card:hover {
  border-color: #667eea;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.1);
}

.account-card.selected {
  border: 2px solid #667eea;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
  transform: translateY(-1px);
}

.account-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.account-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 6px;
  overflow: hidden;
}

.account-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-info {
  flex: 1;
  min-width: 0;
}

.account-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-username {
  font-size: 14px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-actions {
  display: flex;
  gap: 4px;
}

.account-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.last-used {
  font-size: 12px;
  color: #999;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon {
  color: #ddd;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #666;
}

.empty-state p {
  margin-bottom: 20px;
}
</style>
